<template>
   <div >
     <div class="app4">
      <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" @click="seach">搜索</el-button>
     </div>
     <div id = "app5">
       <el-table :data="tableData" style="width: 100%">
       	<el-table-column prop="date" label="日期" width="180"> </el-table-column>
       	<el-table-column prop="price" label="消费金额" width="180"> </el-table-column>
       	<el-table-column prop="createTime" label="创建时间" width="180"> </el-table-column>
       	<el-table-column prop="updateTime" label="更新时间"  width="180"> </el-table-column>
        <el-table-column  label="操作">
            <el-button type="primary" disabled>编辑</el-button>
        </el-table-column>
       </el-table>
     </div>
     <!--分页-->
    <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="currentPage"
         :page-sizes="[5,7,10,20,30]"
         :page-size="pageSize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="totalCount">
     </el-pagination>
   </div>
</template>

<script>

  export default{
    name:'chart',
    data() {
    	return {
    		tableData: [],
        currentPage: 1,
        pageSize: 10,
        totalCount: 0,
        options: [
          {value: '1',label: '按周统计'},
          {value: '2',label: '按月统计'},
          {value: '3',label: '按年统计'},
          ],
        value: '2',

    	}
    },
    mounted: function () {
      let formData = new URLSearchParams();
      formData.append("type",this.value);
      this.$http({
        method: 'get',
        url:'/userFlow/chart',
        headers:{
          "Authorization": sessionStorage.getItem('token')
        },
        data:formData
      }).then(res =>{
        var data = res.data.data.data;
        this.tableData = data;
        this.totalCount = res.data.data.totalCount;

      })
    },
    methods: {

      //分页
      getData(){
        // let formData = new URLSearchParams();
        // formData.append("pageIndex",this.currentPage);
        // formData.append("pageSize",this.pageSize);
        // 这里使用axios，使用时请提前引入
        this.$http({
          method: 'get',
          url: '/userFlow/chart?pageIndex='+this.currentPage+"&pageSize="+this.pageSize,
          headers:{
            "Authorization": sessionStorage.getItem('token')
          },
          //data:formData
        }).then(reponse=>{
              // 将数据赋值给tableData
              this.tableData=reponse.data.data.data;
              // 将数据的长度赋值给totalCount
              this.totalCount=reponse.data.data.totalCount;
         })
      },
      handleSizeChange: function(val){
        console.info("handleSizeChange"+val);
        this.pageSize = val;
        this.getData();
      },
      handleCurrentChange: function(val) {
        console.info("handleCurrentChange"+val);
        this.currentPage = val;
        this.getData()
      },
      seach: function (){
          // 这里使用axios，使用时请提前引入
          let formData = new URLSearchParams();
          formData.append("type",this.value);
          this.$http({
            method: 'get',
            url: '/userFlow/chart',
            headers:{
              "Authorization": sessionStorage.getItem('token')
            },
            data:formData
          }).then(reponse=>{
                // 将数据赋值给tableData
                this.tableData=reponse.data.data;
         })
      }
    }
  }
</script>

<style>
</style>
